<template>
  <el-tooltip
    class="item"
    effect="dark"
    :content="tipContent"
    placement="left-start"
    v-if="thumbsupif"
  >
    <transition name="fade-scale">
      <div
        id="thumbsup"
        :style="thumbsupstyle"
        v-if="thumbsupif"
        @click="thumbsup()"
      >
        <img
          v-if="isthumbsup"
          src="@/assets/img/icon/thumbsup-active.svg"
        />
        <img v-else src="@/assets/img/icon/thumbsup.svg" />
        <div id="thumbsupText"><slot name="thumbsupText"></slot></div>
      </div>
    </transition>
  </el-tooltip>
</template>

<script>
import { httpGet, httpPost } from "@/network/request.js";
import { GetTime } from "@/assets/js/GetTime.js";
import Bus from "@/assets/js/bus.js";
import { local } from "@/assets/js/local.js";

export default {
  name: "thumbsup",
  data() {
    return {
      isthumbsup: false,
      tipContent: "0",
      query:""
    };
  },
  props: {
    width: {
      type: Number,
      default: 40,
    },
    height: {
      type: Number,
      default: 40,
    },
    backcolor: {
      type: String,
      default: "#f7f9fa",
    },
    color: {
      type: String,
      default: "#000000",
    },
  },
  mounted() {
  },
  methods: {
    thumbsup() {
      if (this.isthumbsup) {
        Bus.$emit("warning", "您已经点赞过这篇文章！");
      } else {
        httpPost({
          url: "/thumbsup",
          data: {
            query: this.query,
          },
        })
          .then((res) => {
            this.isthumbsup = true;
            this.getContext();
            Bus.$emit("success", "感谢您的点赞");
            local(1, this.query, GetTime());
          })
          .catch((error) => {
            Bus.$emit("error", error);
          });
      }
    },
    getContext() {
      httpGet({
        url: "/getthumbsup",
        params: {
          query: this.query,
        },
      })
        .then((res) => {
          this.tipContent = `当前已有${res.data[0].thumbsupnumber}个赞`;
        })
        .catch((error) => {
          Bus.$emit("error", error);
        });
    },
    isthumbsup_() {
      let time = local(0, this.query);
      let nowtime=new Date(GetTime()).getTime();
      let endtime=new Date(time).getTime()+86400000;
      if (time == null || nowtime>endtime) {
        this.isthumbsup = false;
      } else {
        this.isthumbsup = true;
      }
    },
  },
  computed: {
    thumbsupstyle() {
      return {
        height: this.height + "px",
        width: this.width + "px",
        backgroundColor: this.backcolor,
        color: this.color,
      };
    },
    thumbsupif() {
      if (
        this.$route.path.indexOf("flie") != -1 ||
        this.$route.path.indexOf("project") != -1
      ) {
        return true;
      } else {
        return false;
      }
    },
    routerParams() {
      return this.$route.params.sequence
    }
  },
  watch: {
    routerParams: {
      deep: true,
      immediate: true,
      handler: function (newValue) {
        if (this.$route.name == "fliecontent"||"projectcontent" && newValue != undefined) {
          this.query=newValue;
          this.getContext();
          this.isthumbsup_();
        }
      },
    },
  },
};
</script>

<style lang="scss" scoped>
#thumbsup {
  border-radius: 5px;
  box-shadow: 1px 1px 3px gray;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid #e5e9ef;
  z-index:9999;
}
#thumbsup img {
  width: 50px;
  height: 30px;
}
#thumbsupText {
  font-weight: bolder;
  font-size: 14px;
}
#thumbsup:hover {
  opacity: 0.5;
}
</style>